html,
html[data-mode=dark] {
  background: var(--background)
}

html {
  --font-default: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, "sans-serif";
  --background-reverse: #000;
  --background: #fff;
  --background-translucent: rgba(255, 255, 255, 0.7);
  --sub-background: #f5f5f5;
  --sib-background: #fff;
  --glass-background: rgba(255, 255, 255, 0.65);
  --main: #303133;
  --routine: #606266;
  --title: #333;
  --sib: #f2f6fc;
  --minor: #909399;
  --seat: #c0c4cc;
  --classA: #dcdfe6;
  --classB: #e4e7ed;
  --classC: #ebeef5;
  --classD: #f2f6fc;
  --classE: #dcdcdc;
  --classF: #333;
  --classG: #dcdcdc;
  --classH: #e9f2ff;
  --classI: #5a3713;
  --classJ: #f9e5fb;
  --classK: #e4e7ed;
  --classL: #666;
  --classM: #2d2e37;
  --quote: #50bfff;
  --code: #409eff;
  --code-background: #e8f3ff;
  --overdue-border: #ffbb76;
  --overdue-background: #fffcef;
  --radius-wrap: 8px;
  --radius-inner: 4px;
  --radius-img: 5px;
  --box-shadow: 0 0px 10px -5px #949494;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-code: #bdbdbd;
  --block-shadow: 1px 2px 10px 0 #afafaf;
  --box-shadow-journal: #d8d8d8;
  --box-shadow-toc: inset 20px 0 30px 0 #dadada, 1px 2px 10px 0 #a8a8a8;
  --background-toc: rgba(255, 255, 255, 0.95);
  --box-shadow-tags: 2px 2px 3px 0px #c2c0b3;
  --background-tags: #fffaeb;
  --background-tag: #fdfdfd;
  --box-shadow-pager: 0 0 3px 0 #cacaca;
  --notice: #fb6c28;
  --background-notice: #fbf5f1;
  --background-journal: #fff;
  --background-journal-block: #f5f5f5;
  --background-journal-gradient: linear-gradient(0deg, #d4d4d4, transparent 80%);
  --shadow-notice: inset 0 0 15px #d1dae8;
  --animation-notice: twinkle 1s ease infinite alternate
}

html[data-mode=dark] {
  --background-reverse: #fff;
  --background: #232323;
  --background-translucent: rgba(35, 35, 35, 0.7);
  --sub-background: #303030;
  --sib-background: #303030;
  --glass-background: rgba(0, 0, 0, 0.65);
  --main: #999;
  --routine: #888;
  --title: #ddd;
  --sib: #3a3a3a;
  --minor: #777;
  --seat: #666;
  --classA: #515253;
  --classB: #454545;
  --classC: #414243;
  --classD: #303030;
  --classE: #585858;
  --classF: #bdbdbd;
  --classG: #303030;
  --classH: #454545;
  --classI: #36312c;
  --classJ: #39243c;
  --classK: #eee;
  --classL: #333;
  --classM: #fff;
  --quote: #276b92;
  --code: #efa141;
  --code-background: #353246;
  --overdue-border: #6f553b;
  --overdue-background: #2b2715;
  --box-shadow: 1px 1px 3px 1px #1b1b1b;
  --text-shadow: none;
  --shadow-code: #191919;
  --block-shadow: 2px 4px 10px 0 #0a0a0a;
  --box-shadow-journal: rgba(0, 0, 0, 0.2);
  --box-shadow-toc: inset 0 0 30px 0 rgba(253, 253, 253, 0.34),
    1px 2px 10px 0 #181818;
  --background-toc: rgba(35, 35, 35, 0.98);
  --box-shadow-tags: 2px 2px 3px 0px #111;
  --background-tags: #35353e;
  --background-tag: #2f2f2f;
  --box-shadow-pager: 0 0 3px 0 #1b1b1b;
  --notice: #9999ff;
  --background-notice: #303030;
  --background-journal: #383838;
  --background-journal-block: #232323;
  --background-journal-gradient: linear-gradient(0deg, #151515, transparent 80%);
  --shadow-notice: inset 0 0 15px #4a4c4e;
  --animation-notice: twinkle-night 1s ease infinite alternate
}

html[data-mode=dark] body:after {
  background: #2b2b2b;
  z-index: -200
}

html[data-mode=dark] .joe_detail__article img,
html[data-mode=dark] img {
  -webkit-filter: brightness(.9);
  filter: brightness(.9)
}

html[data-mode=dark] .motto_day_words,
html[data-mode=dark] .site_driven img.baidu,
html[data-mode=dark] .site_driven img.huawei,
html[data-mode=dark] .site_driven img.jinshan {
  -webkit-filter: invert(1);
  filter: invert(1)
}

html[data-mode=dark] .joe_header .joe_header__above-logo svg {
  display: block
}

html[data-mode=dark] .joe_detail__article .joe_detail__article-abtn,
html[data-mode=dark] .joe_detail__article .joe_detail__article-anote {
  color: rgba(255, 255, 255, .61)
}

html[data-mode=dark] .aplayer,
html[data-mode=dark] .joe_detail__article .joe_detail__overdue-wrapper {
  background: var(--classD)
}

html[data-mode=dark] .joe_detail__article-video .episodes .box .item:not(.active) {
  background: var(--classC)
}

html[data-mode=dark] .aplayer .aplayer-list li {
  color: var(--main);
  border-color: var(--classC)
}

html[data-mode=dark] .aplayer .aplayer-list li.aplayer-list-light,
html[data-mode=dark] .aplayer .aplayer-list li:hover {
  background: #232324 !important
}

html[data-mode=dark] .aplayer .aplayer-info {
  border-color: var(--classC)
}

html[data-mode=dark] .aplayer .aplayer-music {
  color: var(--classF);
  border-color: var(--classC)
}

html[data-mode=dark] .aplayer .aplayer-time .aplayer-icon:hover path {
  fill: var(--classF) !important
}

html[data-mode=dark] .aplayer .aplayer-lrc:before {
  height: 5px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, .3)), to(transparent));
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, transparent);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc000000", endColorstr="#00000000", GradientType=0)
}

html[data-mode=dark] .aplayer .aplayer-lrc:after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), to(rgba(0, 0, 0, .3)));
  background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .3));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#cc000000", GradientType=0)
}

html[data-mode=dark] .joe_detail__friends {
  -webkit-filter: brightness(.8);
  filter: brightness(.8)
}

html[data-mode=dark] .toc-nodata em {
  opacity: .4
}